<template>
  <div class="full">
    <el-row>
      <div class="head">
        <el-row>
          <!--梁宏宇修改添加logo图标-->
          <el-col :span="2">
            <div>
              <img :src="logo_img" alt="TYPS Logo" class="logo-image">
            </div>
          </el-col>
          <el-col :span="10">
            <div class="logo-box">
              <span class="logo-1">特药配送管理系统</span><br>
              <span class="logo-2">www.typs.com</span>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="input-box">
              <!--  logo区域中间按钮 部分       -->
              <el-input
                  v-model="input1"
                  style="width: 240px; "
                  size="large"
                  placeholder="订单管理"
                  :suffix-icon="Search"
              />
            </div>
            <div class="icon-box">
              <a href="">
                <el-icon style="font-size: 27px ; margin-left: 400px ;color: black">
                  <Bell/>
                </el-icon>
              </a>
              <a href="">
                <el-icon style="font-size: 27px ; margin-left: 40px; color: black">
                  <Refresh/>
                </el-icon>
              </a>
              <a @click="open">
                <el-icon style="font-size: 27px ; margin-left: 40px;">
                  <SwitchButton/>
                </el-icon>
              </a>
            </div>
          </el-col>
          <el-col :span="2">
            <el-row>
              <el-avatar class="avatar" @click="userBtn">user</el-avatar>
            </el-row>
            <el-row>
              <el-text class="avatarTitle" tag="b">个人中心</el-text>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <el-row class="background-color"> <!--梁宏宇-背景颜色-->
      <el-col :span="4">
        <div style="margin-top: 100px">
          <el-row>
            <el-button @click="gotoAddProduct" class="goto">
              下单
            </el-button>
          </el-row>
          <el-row>
            <el-button @click="gotoMyOrder" class="goto">
              我的订单
            </el-button>
          </el-row>
          <el-row>
            <el-button class="goto" @click="gotoAlreadyOrder">
              历史订单
            </el-button>
          </el-row>
          <el-row>
            <el-button @click="gotoProduct" class="goto">
              商品浏览
            </el-button>
          </el-row>

        </div>
      </el-col>
      <el-col :span="20">
        <client-main></client-main>
      </el-col>
    </el-row>
  </div>

  <!--个人信息-->
  <el-dialog v-model="data.InfoDialog.show" :title="data.InfoDialog.title" style="width: 600px">
    <el-form label-width="120px">
      <el-form-item label="客户名">
        <el-input style="width: 240px" maxlength="20" v-model="data.InfoDialog.clientInfo.client"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input style="width: 240px" maxlength="20" v-model="data.InfoDialog.clientInfo.consignee"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input style="width: 240px" maxlength="11" v-model="data.InfoDialog.clientInfo.consigneePhone"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input style="width: 240px" maxlength="20" v-model="data.InfoDialog.clientInfo.address"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.InfoDialog.show = false">取消</el-button>
        <el-button type="primary" @click="InfoCertain">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import logo_img from '@/assets/logo2.png';
import {
  Expand, Search, Bell, Refresh, UserFilled, SwitchButton
  , HomeFilled, List, Briefcase, Van, Tools, Grid,
} from '@element-plus/icons-vue'
import ClientMain from "../return/ClientMain"
import router from "@/router";
const open = () => {
  ElMessageBox.confirm(
      '确认退出登录?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '成功退出',
        })
        router.push('/login')
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消退出登录',
        })
      })
}
//跳转到我的订单
const gotoMyOrder = () => {
  router.push("/return/clientHome/MyOrder");
}
//跳转到历史订单
const gotoAlreadyOrder = () => {
  router.push("/return/clientHome/alreadyOrder");
}

//跳转到添加商品
const gotoAddProduct = () => {
  router.push("/return/clientHome/addProduct");
}

//跳转到商品浏览
const gotoProduct = () => {
  router.push("/return/clientHome/Product");
}
//-----------------------------------------------------------------
import {reactive, onMounted, ref} from "vue";
import axios from "axios";
import moment from "moment/moment";
import {ElMessage, ElMessageBox} from "element-plus";

const data = reactive({
  clientList: [],
  history: [],//已完成订单
  select: {
    status: [],
    statusBack: "",
    client: "",
    OrderId: ""
  },
  date: moment(new Date()).format(' YYYY-MM-DD HH:mm'),
  clientPage: {
    currentPage: 1,
    total: ""
  },
  historyPage: {
    currentPage: 1,
    total: ""
  },
  detailList: {
    show: false,
    list: []
  },
  //测试
  orderDetails: {
    detailId: "",
    orderId: 4,
    productId: 3,
    quantity: 20
  },
  //订单添加数据
  order: {
    orderId: "",
    client: "",
    createTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    consignee: "",
    consigneePhone: "",
    address: "",
    userId: ""
  },
  //个人信息
  InfoDialog: {
    title: "",
    clientInfo: {
      client: "",
      consignee: "",
      consigneePhone: "",
      address: "",
      userId: ""
    },
    show: false
  },
//  订单对话框
  orderDialog: {
    show: false
  },
  userId: "",
//  商品显示
  productList: [],
  stockPage: {
    currentPage: 1,
    total: ""
  },
  //商品查询
  product: {
    nickName: "",
    productName: "",
    suppliers: "",
    classs: "",
    type: ""
  },
  classes: [],
  types: []
})

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}
//------------------------个人中心------------------------------
const userBtn = () => {
  data.InfoDialog.title = "个人中心";
  data.InfoDialog.show = true;
}
//判断是否有个人信息
const existsInfo = () => {
  axios({
    url: "http://localhost:8080/clientInfo/exists",
    method: "get",
    params: {userId: data.userId}
  }).then((res) => {
    if (res.data.success) {
      getInfo();//有就获取
    } else {
      errorMessage("请完善个人信息")
      openDialog();//没有就添加
    }
  })
}
//打开个人信息对话框
const openDialog = () => {
  data.InfoDialog.title = "完善个人信息"
  data.InfoDialog.show = true;
}
//保存个人信息
const saveInfo = () => {
  axios({
    url: "http://localhost:8080/clientInfo/saveInfo",
    method: "post",
    params: {
      client: data.InfoDialog.clientInfo.client,
      consignee: data.InfoDialog.clientInfo.consignee,
      consigneePhone: data.InfoDialog.clientInfo.consigneePhone,
      address: data.InfoDialog.clientInfo.address,
      userId: data.userId
    }
  }).then((res) => {
    if (res.data.success) {
      successMessage("保存成功");
      data.InfoDialog.show = false;
    } else {
      errorMessage("保存失败")
    }
  })
}
//获取个人信息
const getInfo = () => {
  axios({
    url: "http://localhost:8080/clientInfo/getInfo",
    method: "get",
    params: {
      userId: data.userId
    }
  }).then((res) => {
    data.InfoDialog.clientInfo = res.data.data;
  })
}
//修改个人信息
const updateInfo = () => {
  axios({
    url: "http://localhost:8080/clientInfo/updateInfo",
    method: "get",
    params: {
      client: data.InfoDialog.clientInfo.client,
      consignee: data.InfoDialog.clientInfo.consignee,
      consigneePhone: data.InfoDialog.clientInfo.consigneePhone,
      address: data.InfoDialog.clientInfo.address,
      userId: data.userId
    }
  }).then((res) => {
    if (res.data.success) {
      successMessage("修改成功");
    } else {
      errorMessage("修改失败");
    }
    data.InfoDialog.show = false;
  })
}
//个人信息对话框确认
const InfoCertain = () => {
  if (data.InfoDialog.title == "完善个人信息") {
    saveInfo();
  } else if (data.InfoDialog.title == "个人中心") {
    updateInfo();
  }
}
//-------------------------个人中心-------------------------
//初始化订单信息
const initOrder = () => {
  data.order.orderId = "";
  data.order.client = data.InfoDialog.clientInfo.client;
  data.order.consignee = data.InfoDialog.clientInfo.consignee;
  data.order.consigneePhone = data.InfoDialog.clientInfo.consigneePhone,
      data.order.address = data.InfoDialog.clientInfo.address,
      data.order.userId = data.userId;
}

//添加新订单
let insertNewOrder = () => {
  initOrder();
  data.orderDialog.show = true;
}

let orderCertain = () => {
  axios({
    url: "http://localhost:8080/Order/createNewOrder",
    method: "post",
    params: data.order
  }).then((res) => {
    if (res.data.success) {
      successMessage("选择商品");
      sessionStorage.setItem("orderId", res.data.data.orderId);
      sessionStorage.setItem("creTime", res.data.data.createTime);
      setStatus(res.data.data.orderId);
      router.push("/return/addProduct");
    } else {
      errorMessage("创建失败")
    }
  })
  data.orderDialog.show = false;
}


let setStatus = (orderId: String) => {
  axios({
    url: "http://localhost:8080/deliverOrder/insert",
    method: "post",
    params: {
      orderId: orderId,
      statusId: 31
    }
  })
}


onMounted(() => {
  getId();
  existsInfo();
})

//获取userID
const getId = () => {
  console.log(sessionStorage.getItem("userId"));
  const key = sessionStorage.getItem("userId");
  if (key) {
    data.userId = key;
  } else {
    errorMessage("获取userId失败");
  }
}

</script>

<style scoped>
.full {
  width: 100%;
  height: 100vh;
}

.head {
  height: 100px;
  width: 100%;
  /*border: 1px seagreen solid;*/
  background-color: #d9ecff;
}

.goto {
  width: 230px;
  margin-top: 50px;
  height: 70px;
  background: #efedcb;
  font-size: 20px;
  border: 2px #3b833b solid;
}

.hcqStyle2 {
  display: inline-block;
  font-weight: bold;
  color: #def;
  text-shadow: 0 0 1px currentColor, -1px -1px 1px #000, 0 -1px 1px #000, 1px -1px 1px #000, 1px 0 1px #000, 1px 1px 1px #000, 0 1px 1px #000, -1px 1px 1px #000, -1px 0 1px #000;
  font-size: 60px;
  line-height: 100px;
  margin-left: 350px;
}

.avatar {
  width: 60px;
  height: 60px;
  margin-left: 35px;
  margin-top: 20px;
}

/*梁宏宇修改*/
.logo-image {
  width: 150px; /* 根据需要调整图片宽度 */
  height: auto; /* 保持图片比例 */
  margin-top: -25px;
}

.logo-box {
  font-family: "Berlin Sans FB";
margin-left: 15px;
  margin-top: 10px;
}

.logo-1 {
  font-size: 35px;
  margin-left: -10px;
}

.logo-2 {
  margin-left: 25px;
  font-size: 25px;
}

/*logo区域中间按钮*/
.input-box {
margin-left: 100px;
  margin-top: 30px;
}
.icon-box{
  margin-top: -32px;
}
.avatar {
  width: 60px;
  height: 60px;
  /*margin-left: 170px;*/
  margin-top: 5px;
}

.avatarTitle {
  width: 60px;
  height: 60px;
  margin-left: 38px;
  margin-top: 5px;
}
</style>